/**
 * Created by zhouli on 2019/3/1
 */
import React from 'react';
import {connect} from 'react-redux';
import {messages} from "share/common";
import "styles/personal-setting/components/person-cards.scss";
import SomeIdCard from 'containers/enterprise-manage/person-manage/person-detail/person-detail-components/some-id-card';
import PDService from 'containers/enterprise-manage/person-manage/person-detail/person-detail.service';
import {
  contactCardDefault,
} from 'containers/enterprise-manage/person-manage/person-detail/person-detail.model';
import noDataImg from 'images/no-data.png';
class PersonCards extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contactCards: [],//证件信息
    }
  }

  componentDidMount() {
    contactCardDefault.userOID = this.props.user.userOID;
    this.getContactCards();
  }
  //获取证件信息
  getContactCards = () => {
    PDService.getContactCards(this.props.user.userOID)
      .then((res) => {
        this.setState({
          contactCards: res.data
        });
      })
  };
  //创建证件后
  createContactCardOver = () => {
    this.getContactCards();
  }


  //渲染证件信息，必须与租户管理员权限且不是接口导入模式，才能编辑
  renderContactCards = (cards) => {
    if (cards.length > 0) {
      let dom = [];
      cards.map((data, index) => {
        dom.push(<div className="f-left id-card-item">
          <SomeIdCard
            isShowEditBtn={this.props.company.enableIdCardModify}
            createCardOver={this.createContactCardOver}
            cardInfo={data}
            key={"is-empty-id-card" + data.contactCardOID}/>
        </div>)
      })
      //加一个空证件：有限制条件的
      if(this.props.company.enableIdCardModify){
        dom.push(
          <div className="f-left bank-card-item">
            <SomeIdCard isEmpty={true}
                        createCardOver={this.createContactCardOver}
                        cardInfo={contactCardDefault}
                        key="is-empty-id-card"/>
          </div>
        )
      }

      return (
        <div className="bank-card-list">
          {dom}
          <div className="clear"/>
        </div>
      )
    } else {
      if(this.props.company.enableIdCardModify){
        return (
          <div className="bank-card-list">
            <div className="f-left id-card-item">
              <SomeIdCard isEmpty={true}
                          createCardOver={this.createContactCardOver}
                          cardInfo={contactCardDefault}
                          key="is-empty-id-card"/>
            </div>
            <div className="clear"/>
          </div>
        )
      }else {
        return <div className="no-data-img">
          <div><img src={noDataImg}/></div>
          <div>{messages('personal-setting.key69')/*暂无数据*/}</div>
        </div>
      }
    }
  }

  render() {
    return (
      <div className="person-cards-info-wrap">
          {this.renderContactCards(this.state.contactCards)}
      </div>
    )
  }
}

PersonCards.propTypes = {

};

PersonCards.defaultProps = {
  originEditingStatus: false,
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    user: state.login.user,
    company: state.login.company,
    tenantMode: state.main.tenantMode,
  }
}
export default connect(mapStateToProps)(PersonCards);
